<template>
  <div class="patient_main">
    <div class="main" style="padding-bottom: 0px;">
      <div class="patient-list">
        <!---->
        <div class="patient-header">
          <div class="title">请选择患者信息</div>
          <div class="subtitle">以便医生给出更准确的诊疗建议，患者信息仅医生可见</div>
        </div>
        <div class="record">
<!--          <div class="record-item selected">-->
<!--            <div class="record-wrap-name">-->
<!--              <div class="record-avatar-name">-->
<!--                <img src="../../assets/patients/patient.png" class="record-avatar">-->
<!--                <div class="record-name">123456</div>-->
<!--              </div>-->
<!--              <div class="record-action" @click="toPatientsEdit(2)"> 编辑</div>-->
<!--            </div>-->
<!--            <div class="record-info"> 男 34岁 15kg</div>-->
<!--            <div class="mid-line"></div>-->
<!--            <div class="record-info-detail">-->
<!--              <div class="record-info-detail-item">-->
<!--                <div class="detail-item-left">肝肾功能</div>-->
<!--                <div class="detail-item-right">肝功能正常 肾功能正常</div>-->
<!--              </div>-->
<!--              <div class="record-info-detail-item">-->
<!--                <div class="detail-item-left">过敏史</div>-->
<!--                <div class="detail-item-right">无</div>-->
<!--              </div>-->
<!--              <div class="record-info-detail-item">-->
<!--                <div class="detail-item-left">过往病史</div>-->
<!--                <div class="detail-item-right"> 无</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <div class="record-item" :class="{ selected: selectedItem === item.id }" @click="selectedItem = item.id" v-for="(item, key) in patient.patient_info_list" :key="key">
            <div class="record-wrap-name">
              <div class="record-avatar-name">
                <img src="../../assets/patients/patient.png" class="record-avatar">
                <div class="record-name">{{ item.name }}</div>
              </div>
              <div class="record-action" @click="toPatientsEdit(2, item.id)"> 编辑</div>
            </div>
            <div class="record-info"> {{ item.sex ? '女' : '男' }} 22岁 {{ item.weight }}kg</div>
            <div class="mid-line" v-if="selectedItem === item.id"></div>
            <div class="record-info-detail" v-if="selectedItem === item.id">
              <div class="record-info-detail-item">
                <div class="detail-item-left">肝肾功能</div>
                <div class="detail-item-right">{{ item.liver_function ? '肝功能异常' : '肝功能正常' }} {{ item.renal_function ? '肾功能异常' : '肾功能正常' }}</div>
              </div>
              <div class="record-info-detail-item">
                <div class="detail-item-left">过敏史</div>
                <div class="detail-item-right">{{ item.allergy_history ? '有' : '无' }}</div>
              </div>
              <div class="record-info-detail-item">
                <div class="detail-item-left">过往病史</div>
                <div class="detail-item-right">{{ item.illness_history ? '有' : '无' }}</div>
              </div>
            </div>
          </div>
          <div class="record-item-add" @click="toPatientsEdit(1, 0)">
            <div><img src="../../assets/patients/add.png" alt=""
                                         class="add-record">
              <div>添加患者</div>
            </div>
          </div>
        </div>
        <div class="iphone-x bottom-box btn-next">
          <button class="dxd-button dxd-button-primary feedback" @click="toPay"> 提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, watch, onMounted} from "vue";
import answer from "../../api/answer.js";
import {ElMessage, ElMessageBox} from "element-plus";
import { useRouter, useRoute} from "vue-router";
import patient from "../../api/patient.js";
import doctor from "../../api/doctor.js";
import pay from "../../api/pay.js";
const router = useRouter()
const route = useRoute()

onMounted(()=>{
  let token = sessionStorage.access_token || localStorage.access_token;
  patient.get_patients_info(token)
})
const toPatientsEdit=(type, id)=>{
  router.push(`/patients_edit?type=${type}&id=${id}`)
}

let selectedItem = ref(null);

const toPay=()=>{
  if (null != selectedItem.value) {
    patient.patient_id = selectedItem.value
    let token = sessionStorage.access_token || localStorage.access_token;
    patient.save_answer(token)
    pay.price = localStorage.getItem("doctor_price")
    pay.coupon_name = ""
    router.push('/pay')
  } else {
    ElMessage.error("请选择患者！")
  }

}

</script>

<style scoped>
.patient_main{
  background-color: #f4f4f4;
}
.main{
  width: 768px;
  height: 590px;
  margin: 0 auto;
}
.patient-list {
  height: auto;
  min-height: 100vh;
  background-color: #fff;
}
.patient-list .patient-header {
  padding: 20px 16px;
}
.patient-list .patient-header .title {
  margin-bottom: 10px;
  color: #333;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.09;
}
.patient-list .patient-header .subtitle {
  color: #666;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.14;
}
.patient-list .record {
  display: flex;
  flex-wrap: wrap;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: start;
  justify-content: flex-start;
  padding: 20px 16px;
}
.patient-list .record-item.selected {
  background-color: #e5f9f4;
  border: 1px solid #00c792;
  border-radius: 8px;
}
.patient-list .record-item {
  width: 100%;
  margin-bottom: 12px;
  padding: 16px 14px;
  color: #4d4d4d;
  background-color: #fafafa;
  border: 1px solid #fafafa;
  border-radius: 4px;
}
.patient-list .record .record-wrap-name .record-avatar-name, .patient-list .record .record-wrap-name {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.patient-list .record .record-wrap-name {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.patient-list .record .record-wrap-name .record-avatar {
  width: 20px;
  height: 20px;
  margin-right: 6px;
  border-radius: 4px;
}
.patient-list .record .record-wrap-name .record-name {
  color: #333;
  font-weight: 700;
  font-size: 16px;
}
.patient-list .record .record-wrap-name .record-action {
  color: #00c792;
  font-size: 13px;
}
.patient-list .record .record-info {
  margin: 2px 0;
  color: #4d4d4d;
  font-size: 14px;
}
.patient-list .record .mid-line {
  width: 100%;
  height: 1px;
  margin: 8px 0;
  background: #d9d9d9;
  opacity: .5;
}
.patient-list .record .record-info-detail-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-bottom: 6px;
  font-size: 14px;
}
.patient-list .record .record-info-detail-item .detail-item-left {
  width: 56px;
  height: 21px;
  margin-right: 14px;
  color: #999;
  white-space: nowrap;
}
.patient-list .record .record-info-detail-item .detail-item-right {
  color: #4d4d4d;
  white-space: wrap;
}
.patient-list .record-item {
  width: 100%;
  margin-bottom: 12px;
  padding: 16px 14px;
  color: #4d4d4d;
  background-color: #fafafa;
  border: 1px solid #fafafa;
  border-radius: 4px;
}
.patient-list .record-item-add {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  width: 100%;
  height: 81px;
  margin-bottom: calc(env(safe-area-inset-bottom) + 79px);
  color: #00c792;
  background: #fafafa;
}
.patient-list .record-item-add .add-record {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 auto 6px;
}
.patient-list .bottom-box {
  box-sizing: border-box;
  padding: 10px 16px;
  background: #fff;
}
@supports (padding-top:env(safe-area-inset-bottom)) {
  .iphone-x {
    margin-bottom: env(safe-area-inset-bottom);
  }
}
.iphone-x {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-width: 768px;
}
.patient-list .bottom-box:before {
  position: absolute;
  top: -1px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  border-top: 1px solid #ebebeb;
  transform: scaleY(.5);
  transform-origin: 0 100%;
  content: "";
}

.dxd-button-primary {
  color: #fff;
  background-color: #00c792;
}
.dxd-button {
  position: relative;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  padding: 14px 0;
  overflow: hidden;
  font-weight: 500;
  font-size: 17px;
  line-height: 19px;
  text-align: center;
  border: 0;
  border-radius: 24px;
  outline: 0;
  appearance: none;
}

button, input, textarea {
  font: inherit;
}

.dxd-button:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1a1a1a;
  opacity: 0;
  content: "";
}
</style>